<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<!--dynamic table-->
<link href="/js/advanced-datatable/css/demo_page.css" rel="stylesheet" />
<link href="/js/advanced-datatable/css/demo_table.css" rel="stylesheet" />
<link rel="stylesheet" href="/js/data-tables/DT_bootstrap.css" />


< <!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <header class="panel-heading">
                    Dynamic Table
                    <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                </header>
                <div class="panel-body">
                    <div class="adv-table">
                        <table  class="display table table-bordered table-striped" id="dynamic-table" style="table-layout: fixed">
                            <thead>
                            <tr>
                                <th style="width: 7%"> opt </th>
                                <th style="width: 15%"> 教师姓名 </th>
                                <th style="width: 20%"> 教师简介 </th>
                                <th style="width: 30%"> 教师资历 </th>
                                <th> 教师职称 </th>
                                <th> Edit </th>
                                <th> Delete </th>
                            </tr>
                            </thead>
                            <tbody>
                            <%--                            JSTL c标签遍历request中的list--%>
                            <c:forEach items="${list}" var="teacher">
                                <tr class="">
                                    <td>
                                        <input type="checkbox"  name="checkAll" value="${teacher.id}">
                                    </td>
                                    <td>${teacher.name}</td>
                                    <td>${teacher.intro}</td>
                                    <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">${teacher.career}</td>
                                    <td>${teacher.level == 1 ? "初级教师" : "高级教师"}</td>
                                    <td><a class="edit" href="/teacher/findById/${teacher.id}">Edit</a></td>
                                    <td><a class="delete" href="/teacher/deleteTeacher/${teacher.id}">Delete</a></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>

</div>
<!--body wrapper end-->
<!--dynamic table-->
<script type="text/javascript" language="javascript" src="/js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="/js/dynamic_table_init.js"></script>

</html>
